<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
        </div>
        <el-row>
          <el-form-item label="服务模板名称:">
            <span>{{ dataInfo.modelName }}</span>
          </el-form-item>
          <el-form-item label="服务模板类型:">
            <span>{{ dataInfo.modelType == 1 ? "常规版" : "自由版" }}</span>
          </el-form-item>
          <el-form-item label="地区:">
            <span>{{ dataInfo.address }}</span>
          </el-form-item>
          <el-form-item label="小区:">
            <span>{{ dataInfo.villageName }}</span>
          </el-form-item>
          <el-form-item label="是否默认模板:">
            <span>{{ dataInfo.defaultFlag ? "是" : "否" }}</span>
          </el-form-item>
          <el-form-item label="是否支持语音下单:">
            <span>{{ dataInfo.btnVoiceFlag ? "是" : "否" }}</span>
          </el-form-item>
          <el-form-item label="按键样式模板:">
            <span>{{ dataInfo.btnModelName}}</span>
          </el-form-item>
          <el-form-item label="精选是否采用新样式:">
            <span>{{ dataInfo.btnStyle}}</span>
          </el-form-item>
          <el-form-item label="模板背景颜色:">
            <span>{{ dataInfo.bgColor}}</span>
          </el-form-item>
          <el-form-item label="备注:">
            <span>{{ dataInfo.remark }}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>

        </el-row>
        <div class="tit">
          <h2>服务信息列表</h2>
        </div>
        <el-row style="width:calc(100vw - 260px)">
          <el-table :data="tableData" border highlight-current-row :header-row-style="{ 'background-color': '#f2f2f2' }">
            <el-table-column label="序号" width="60px" align="center" type="index">

            </el-table-column>
            <el-table-column prop="btnCode" label="服务编号" width="80px" align="center">

            </el-table-column>
            <el-table-column prop="btnName" label="服务功能键" width="120" align="center">

            </el-table-column>
            <el-table-column label="自定义功能键图片" width="160" align="center">
                <template slot-scope="scope">
                  <el-image v-if="scope.row.customImage" style="width: 100px;height:100px" fit="cover" :src="scope.row.customImage" :preview.src-list="[scope.row.customImage]"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="自定义功能键名称" prop="customName" width="130" align="center">

            </el-table-column>
            <el-table-column label="功能键描述" prop="describe" width="180" align="center"></el-table-column>
            <el-table-column label="按键归类" width="220" align="center">
              <template slot-scope="scope">
                <span>{{ formatBtnMRelationList(scope.row) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="relationType" label="关联类型" width="170" align="center">
              <template slot-scope="scope">
                <span>{{ $Filters.formatRelationType(scope.row.relationType) }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="typeVal" label="事件类型" width="150" align="center">
              <template slot-scope="scope">
                <div>
                  {{ $Filters.formatEvent(scope.row.eventId) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="linkUrl" label="关联内容" width="220" align="center">
              <template slot-scope="{row}">
                {{ row.eventId==7?formatLinkUrl(row):row.linkUrl }}
              </template>
            </el-table-column>
            <el-table-column prop="classifyName" label="服务分类" width="230px" align="center">

            </el-table-column>
            <el-table-column prop="businessName" width="230px" label="商户" align="center">

            </el-table-column>
            <el-table-column prop="limitType" width="170" label="仅会员购买">
              <template slot-scope="{row}">
                {{ row.limitType==1?'是':'否' }}
              </template>
            </el-table-column>
            <el-table-column prop="voiceOrderFlag" width="100" label="支持语音支付">
              <template slot-scope="{row}">
                {{ row.voiceOrderFlag==1?'是':'否' }}
              </template>
            </el-table-column>
            <el-table-column prop="serverTimeRange" width="200" label="服务时间范围">
              <template slot-scope="{row}">
                <span>{{ row.serverTimeRange&&row.serverTimeRange.replace(",","-") }}</span>
              </template>
            </el-table-column>
            <el-table-column label="合并功能键编号" prop="parentBtnCode" width="130px" ></el-table-column>
            <el-table-column label="操作" width="150px" align="center">
              <template slot-scope="scope">
                <div>
                  <el-button v-if="scope.row.relationType == 1" plain type="mini"
                    @click.native="handleSearchMore(scope.row)">查看详细服务</el-button>
                </div>
              </template>
            </el-table-column>


          </el-table>
        </el-row>

      </el-form>


    </div>
    <server-select ref="ServerSelect" :editOrAdd="false">
    </server-select>
  </div>
</template>

<script>
import ServerTemplateApi from '@/api/server/serverTemplate';
import ServerSelect from "@/components/ServerSelect";

export default {
  data() {
    return {
      dataInfo: {},
      tableData: [],
      btnModelRelations:[],
    };
  },
  components: {
    ServerSelect
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      ServerTemplateApi.getServerTemplateInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data
        this.tableData = res.data.serverModelBtns

        this.tableData.forEach(item => {
          item.businessName = item.businessList && item.businessList.map(item => item.name).join(",")
          item.classifyName = item.classifyName && item.classifyList.map(item => item.name).join(",")
        })
      })
    },
    formatBtnMRelationList(row){
      const {moduleCode,formatCode} = row
      let name = ""
      this.btnModelRelations.find((item,index)=>{
          if(item.moduleCode==moduleCode) {
            return name = `${this.$Filters.formatModuleType(item.moduleType)}模块`
          }
          if(item.btnFormats&&item.btnFormats.length){
            item.btnFormats.find(item2=>{
              if(item2.formatCode==formatCode){
                return name = name +`${item2.row}行${item2.col}列`
              }
            })
          }
        })
        return name
    },
    formatLinkUrl({eventId,linkUrl,floorList}){
      if(eventId==7&&linkUrl){
        return floorList.map(item=>item.name).join(",")
      }
      return ""
    },
    formatServerTimerange(val){
      val&&val.replace(",","-")
    },
    // 获取按键样式模板列表
    async getBtnModelList(){
        const {data} = await BtnModelApi.btnModelList()
        this.btnModelRelations = (data||[]).find(item=>item.modelId==this.dataInfo.btnModelId).btnModelRelations
    },
    // formatRelationType(cell) {
    //   if (cell == 1) {
    //     return "产品"
    //   } else if (cell == 2) {
    //     return "H5链接"
    //   } else if (cell == 3) {
    //     return "小程序链接"
    //   } else if (cell == 4) {
    //     return "点击事件"
    //   }else if(cell==5){
    //     return "小程序内部页面"
    //   }
    // },

    handleSearchMore(row) {
      this.$refs.ServerSelect.showDialog(row.btnGoodsParams||[])
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/server/serverTemplateManagement' })
    }

  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
